(Esto es una captura de imagen, no hace la función de buscar pero así es como queda el menu9)

Anteriormente aplicamos las categorías en forma de pestaña horizontal, hoy vamos a aplicarlas de la misma forma pero en vertical, los pasos a seguir son los siguientes:
Una vez tengamos los post etiquetados nos dirigimos a:
Plantilla/Edicion de Html/Expandir plantillas de artilugios.

Buscamos esta línea de código:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Y la sustituimos por esta:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Luego buscamos:
]]></b:skin>
y justo antes añadiremos el siguiente código:

*- Menu 9--------------------------- */

#menu9 {
width: 200px;
margin: 10px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}

Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y reemplazaremos la anterior de color azul por esta:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Para los que ya tienen aplicadas las categorías en forma de pestaña horizontal y desean cambiar a la vertical solo deben modificar la parte de las etiquetas es decir
sustituir desde /*- Menu Tabs F */ hasta #tabsF a:hover span { por el código de la etiqueta a poner según modelo.
Luego buscar la parte del código en rojo que sustituimos por el azul y donde dice:
<div id='tabsF'> sustituimos
tabsF por menu9 o el que añadimos.

En
csspicstock.blogspot.com podéis ver diferentes diseños y colores de las etiquetas y el código para cada una de ellas.


Anónimo

Hoy mismo he cambiado mis "pestañas" por una de estas verticales, las otras ya se me estaban descontrolando,je,je.
Por cierto, Gem@, las dos somos "aves nocturnas" ¿eh?
¡Saludos!

Responder
MacTrucos

Otra vez YO XD! sabes como se puede borrar para que no salga inicio

Responder
Gem@

Hola Rosa menudo cambio ha dado tu blog ¿Sabes? hace tiempo que estoy cansada de ver las categorías en horizontal, pero creo que a los visitantes les resultan más cómodas a la hora de buscar algo, a lo mejor estoy confundida :(

MacTrucos ya probé sin resultado ¿No tienes alguna pregunta de las que se puedan solucionar? :) :) :)

Responder
ppscentury

HOla
no tengo la etiqueta b:section class="header"...?

Responder
Gem@

Claro que debes tenerla ppscentury activa la casilla de Expandir plantillas de artilugios verás como la encuentras ;)

Responder
ppscentury

... te juro por la Virgen de la Pana que no tengo este código en la plantilla: b:section class="header" id="header" maxwidgets="1" showaddelement="no"

Y la verdad que estoy muy interesado en cambia el aspecto de la clasificación de mis etiquetas...

Responder
Gem@

¿Qué versión de Blogger usas? plantilla clásica o beta?

Responder
ppscentury

pues uso blogger beta

Responder
Gem@

Estas explicaione son para Blogger beta es extraño que no encuentres ese código dime que plantilla usas que pueda buscarlo yo ;)

Responder
Gem@

Ya lo he visto Minima Black debes tener ese código, prueba a marcar en expandir la plantilla de artilugios seguro que lo encuentras.

Responder
qaesar

Gema, en mi plantilla, con los artilugios extendidos, no encuentro esto: "]]>". Es que en toda ella no he visto los dos corchetes esos ]] por ninguna parte. Mi plantilla creo que es mínima black, pero no sé qué versión de blogger uso. Por cierte, ¿cómo averiguo la versión que tengo?
Otra cosa, no sé si ya has encontrado algo sobre el formulario para enviar correos que te pedí o aún estás indagando...
Ya me dirás, y mil gracias...
Al final me voy a enamorar de ti

Responder
qaesar

A ver, he encontrado los susodichos corchetes, he hecho lo que indicas, pero las etiquetas me salen donde antes, como antes, pero sin el título "etiquetas" que tenía antes y sin el número de posts correspondientes a cada etiqueta. ¿Además de hacer lo que indicas, hay que hacer algo en la página que dices, en csspicstock?
Un abrazo más

Responder
Gem@

Saludos Qaesar, no hace falta añadir nada que no esté en esta entrada, quiero decir que no necesariamente debes acudir a csspicstock.
Lo que si es necesario es hacer paso a paso lo que explico en la entrada, incluso... añadir la parte de
*- Menu 9---- */

Para situar las etiquetas donde deseas es necesario arrastrar la pestaña que encontrarás al visionar "Plantilla" (donde añadimos los artilugios )

No aparecen el número de entradas porque es un menú tipo pestañas como el de la imagen que ilustra esta entrada.

Desde principios de año todos los blog de Blogger pasaron a ser beta, otra cosa es la plantilla que utilices una clásica (de las antiguas sin arilugios) o una exclusiva para Blogger beta.

Hay muchas formas de saber si tu plantilla es beta por ejemplo cuando entras a tu panel observarás que dice "nueva entrada" "administrar: entradas,opciones, diseño" si por el contraio no es beta en lugar de "diseño" pondría "plantilla" otra forma de saberlo y la más fiable es lo que te comentaba antes que tengas opción de añadir artilugios, te dejo una captura de algo que vemos todos lo que usamos una plantilla beta, es donde alojamos los artilugios, imágenes, html, enlaces, logo... todo lo añadido al blog.

Sobre lo que me comentaste, te dejé un comentario en alguna parte respondiendo a uno tuyo. Decía que al ser algo que se escapa de mis manos lo comenté con alguien que pensé podría ayudar pero al parecer tampoco consigue dar con ello o no ha podido responder.
He aplicado en mi blog de pruebas el código que rescaté de Greenpeace pero es algo muy complejo y sinceramente dificil.
Aún así hay alguien a quien poder acudir a J.Miur de Vagabundia creo es la persona ideal que podría orientarte si quieres en algún comentario pudes exponerle la pregunta y estoy segura que obtendrás respuesta.
Sobre lo de las categorías si no te resulta házmelo saber ;)
(No recomiendo a nadie enamorarse de mi, soy muy complicada)

Responder
Gem@

Mira esto por si te interesa Qaesar
www.formlogix.com/

Responder
Anónimo

Gem@ que tal? bueno, dandole ese aspecto a mi nueva página, una de las cosas que he considerado es incluir este truco para parecer una pagina web, sin perder el encanto de ser un blog, intentare a ver como me sale el invento, luego te cuento.

Responder
Anónimo

Hola Gema, una cosita porque al cambiar de plantilla dejo de ver mi perfil? de momento me interesa que sea visible hay alguna manera?
Un saludo y gracias
Susana

Responder
Anónimo

hola gem@, te deje un mail para que me ayudes en algo,con relación a este asunto de la categorias que no logro entender del todo...gracias anticipadas

Responder
Gem@

Saludos Leny voy a ver tu mail ahora mismo ;)

Hola Susana mira si tienes activada la casilla para compartir el perfil:
En Panel/Editar perfil debes clicar compartir mi perfil.
Luego si deseas añadirlo en el blog (página principal) vas a Diseño/Plantilla/ clicas en añadir un elemento de página y después en perfil, lo añades al blog y listo :)

Responder
Gem@

No veo tu e-mail Leny :(
Mira si lo tienes en "Enviados" y si puedes reenvialo por favor :)

Responder
Anónimo

Gracias Gema, siempre solucionas todos mis despites...
Un saludito
Susana

Responder
Gem@

Gracias a ti Susana por tomarte la molestia de volver ;)

Responder
Daniel

Hola Gema, otra vez necesito de tu ayuda. Hace dias que estoy tratando un post que vi en dia que explicaba como insertar en la sidebar, no se como se llama, vos lo tenes titulado "De interes". Se que lo lei pero hace dias que estoy dando vueltas por tu blog pero no logro ubicar de nuevo esa entrada. Espero que me puedas ayudar. Como siempre. Soy un lector un poco molesto. jeje.
Saludos.

Responder
Gem@

Hola Daniel, no eres molesto, lo que ocurre que a veces no sé el título que sería el acertado para que al buscar algo se encuentre fácilmente.
Puedes encontrarlo aquí:
Si te surgen dudas házmelo saber ;)
http://gemablog-.blogspot.com/2007/04/men-despegable-personalizado.html

Responder
Nad!a

hola gema! he estado buscando laas etiquetas y al probar esto en mi blog no me funciona tengo la plantila mst moto-- pero la estado modificando .. lo curioso es q he probado el codigo q vos das y em han funcionado en otro a blgo pero en este no! -- no se si puede q es esta plantilla el codigo tenga algun cambio o q yo tocando la plantilla halla desabilitado alguan opcion??
Gracias desde ya!

Responder
Gem@

Hola Nad!a lo ideal es siempre que nuestro blog de pruebas tenga la misma plantilla que el original, solo así sabremos si funciona o presenta problemas en el original ;)
Inténtalo con una plantilla igual y me cuentas...

Responder
Sergio Valera
Este comentario ha sido eliminado por el autor.
Responder
Sergio Valera

Hola Gema,
He puesto mis pestañas en vertical, pero se me ha creado un espacio entre boton y boton igual de grande que un botón en si... ¿Que puedo hacer?

Responder
Gem@

:: En qué blog lo tienes Sergio?

Responder
Sergio Valera

En http://niponazo.blogspot.com

Perdona, se me olvido ponerlo antes :S

Responder
Gem@

:: Sergio ¿qué pasos seguiste para añadir ese menú? quiero decir que no es tal y como se explica en esta entrada ¿verdad?

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top